<template>
  <div class="float-item fixed-item  layer" v-bind:class="{on: active}" :style="layerstyle">
    <div open-type="" class="layer isfixed left bottom" :style="'width: ' + data.width / 2 + 'px; margin: 119px 46px;'">
      <i v-if="data.type == 1" :style="'font-size:' + data.width / 2 + 'px'" :class="data.icon"></i>
      <vimage v-if="data.type == 2" mode="widthFix" lazy-load="" :src="data.img ? data.img : img" alt="" style="width: 100%; display: block;" ></vimage>
    </div>
    <div data-html2canvas-ignore="" class="del-mask">
      <span class="del" @click="delhandle" style="">删除</span>
      <!---->
    </div>
    <i data-html2canvas-ignore="" class="left-border border"></i>
    <i data-html2canvas-ignore="" class="right-border border"></i>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      img: require('@/assets/images/top.png')
    };
  },
  computed: {
    layerstyle() {
      let position = this.data.position;
      let a = '';
      let b = '';
      switch (position) {
        case 'lt':
          a = 'left:';
          b = 'top:';
          break;
        case 'rt':
          a = 'right:';
          b = 'top:';
          break;

        case 'lb':
          a = 'left:';
          b = 'bottom:';
          break;
        case 'rb':
          a = 'right:';
          b = 'bottom:';
          break;
      }
      return (
        'height:' +
        this.data.width / 2 +
        'px; width: ' +
        this.data.width / 2 +
        'px; margin: 0px ' +
        (this.data.deviationb / 2 + 15) +
        'px;' +
        a +
        this.data.deviationb / 2 +
        'px;' +
        b +
        (this.data.deviationa / 2 + 50) +
        'px;'
      );
    }
  },
  methods: {
    delhandle() {
      this.$emit('delhandle');
    }
    // delhandle)
  }
};
</script>

<style>
.float-item.layer {
  display: flex;
  align-items: center;
  position: absolute;
}
.layer {
  background: none;
}
.float-item.layer .layer {
  position: relative;
  margin: 0 !important;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.float-item.layer.on .del-mask {
  top: -2.5px;
  left: -15px;
  width: calc(100% + 30px);
  height: calc(100% + 5px);
}

.float-item.on .del-mask {
  border: 1px solid #2d8cf0;
  position: absolute;
  display: block;
  background: rgba(255, 255, 255, 0.5);
  -webkit-box-shadow: 0px 1px 14px rgba(133, 148, 162, 0.2);
  box-shadow: 0px 1px 14px rgba(133, 148, 162, 0.2);
}

.float-item .del-mask {
  display: none;
}
.float-item.layer.on .del-mask .del {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.float-item.on .del-mask .del {
  top: -1px;
  right: 0;
}

.float-item .del {
  position: absolute;
  width: 40px;
  height: 20px;
  right: 0;
  top: 0;
  background: #ff1f2c;
  border-radius: 0px 0px 2px 2px;
  text-align: center;
  line-height: 18px;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  z-index: 1000;
}
</style>
